<template>
  <div class="product-info-left">
    <div ref="viewBox" class="vue-photo-zoom-pro"
      @mouseenter.stop="parentMouseenter"
      @mouseleave.stop="parentMouseleave"
    >
      <div ref="viewPort" class="selector square"
         style="width: 168px; height: 168px;" v-show="isShow"
        :style="[
            { width: viewPortInfo.width },
            { height: viewPortInfo.height },
            { left: `${view_left}px` },
            { top: `${view_top}px` },
        ]"
      ></div>
      <div class="zoomer out-zoomer"
        style="width: 336px; height: 336px;" v-show="isShow"
      >
        <div class="position" 
          :style="{'transform': `translate3d(-${view_left * times}px, -${view_top * times}px, 0px)`}">
          <div class="custom-zoomer"
               style="transform: scale(2) translateZ(0px); width: 378px; height: 378px;"><!----> 
               <img :src="selectImg"
              class="img-zoomer" style="display: block; width: 100%; height: 100%;"></div>
        </div>
      </div>
      <el-carousel ref="swiperRef" height="378px"
       arrow="never" indicator-position="none" :interval="3000"
       @change="handleChange"
      >
        <el-carousel-item v-for="(item, index) in imgArr" :key="index">
          <img :src="item" alt="" class="banner-img">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="swiper-img">
      <div class="img-item" v-for="(item, index) in imgArr" :key="index"
           :class="{'active': index === curIndex}"
        @click="handleImgClick(index)"
      >
        <img :src="item" alt="">
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, reactive, computed} from 'vue'
import {ElCarousel, ElCarouselItem} from "element-plus";
const swiperRef = ref()
const curIndex = ref(0)
const imgArr = ref([])
imgArr.value = [
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/71NtfPxtL8L._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/710NqhR6TZL._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/718DDDJrJ7L._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/71KPQvwI6xL._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/613jXsBsVxL._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/71d-BAXpwiL._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/71fNRFBNpaL._AC_SL1500_.jpg',
    'https://argos-shop-online.s3.amazonaws.com/pc/gp/B09W32G4Z8/51MvB0rKYlL._AC_SL1500_.jpg'
]
const selectImg = computed(() => {
  return imgArr.value[curIndex.value]
})
const handleChange = (index) => {
  curIndex.value = index
}
const handleImgClick = (index) => {
  curIndex.value = index
  swiperRef.value.setActiveItem(index)
}
const times = ref(2)
const viewPortInfo = reactive({
  width: 168,
  height: 168
})
const isShow = ref(false)
    const view_left = ref(0)
    const view_top = ref(0)
    const viewBox = ref()
    const viewPort = ref()
    const big_picture_left = ref(0)
    const viewBox_width = ref(0)
    const viewBox_height = ref(0)
// 移动处理函数
const moveHandler = (event) => {
  const viewBoxInfo = viewBox.value.getBoundingClientRect()
  const width = parseFloat(viewPortInfo.width) // 网格宽
  const height = parseFloat(viewPortInfo.height) // 网格高
  const left = event.clientX - width / 2 - viewBoxInfo.left
  const top = event.clientY - height / 2 - viewBoxInfo.top
  const maxLeft = viewBoxInfo.width - width
  const maxTop = viewBoxInfo.height - height
  view_left.value = left <= 0 ? 0 : left >= maxLeft ? maxLeft : left
  view_top.value = top <= 0 ? 0 : top >= maxTop ? maxTop : top
}
const parentMouseenter = () => {
  isShow.value = true
  document.addEventListener('mousemove', moveHandler)
}
const parentMouseleave = () => {
  isShow.value = false
  document.removeEventListener('mousemove', moveHandler)
}
</script>
<style scoped lang="scss">
.product-info-left {
  width: 378px;
  margin-right: 22px;
  .selector{
    z-index: 2 !important;
  }
}
.vue-photo-zoom-pro{
  //display: inline-block;
  font-size: 0;
  position: relative
}
.selector{
  width: 168px;
  height: 168px;
  background-color: rgba(0,0,0,.4);
  background-repeat: no-repeat;
  cursor: crosshair;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 1
}
.banner-img{
  width: 100%;
  height: auto;
}
.swiper-img{
  height: 99px;
  margin-top: 15px;
  display: flex;
  overflow: hidden;
  overflow-x: scroll;
  padding-bottom: 10px;
}
.img-item{
  flex-shrink: 0;
  width: 87px;
  height: 89px;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  margin-right: 10px;
  &:last-child{
    margin-right: 0px;
  }
  img{
    width: 100%;
    height: 100%;
  }
  &.active {
    border: 1px solid var(--color-main)
  }
}
.selector{
  background-color: rgba(0, 0, 0, 0.4);
  cursor: crosshair;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.zoomer{
  overflow: hidden;
}
.product-info-left .out-zoomer{
  z-index: 8;
  background: #fff;
}
.vue-photo-zoom-pro .out-zoomer{
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  position: absolute;
  right: -8px;
  transform: translate(100%);
}
.zoomer .custom-zoomer{
  transform-origin: left top;
}
.product-info-left .out-zoomer img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
.banner-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
:deep(.el-carousel){
  width: 378px;
  height: 378px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
//.swiper-img::-webkit-scrollbar {
//  width: 0;
//  height: 0;
//}
</style>